<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <!-- 此处替换了li  -->
    <ul>

      <router-link
        tag="li"
        class="item"
          v-for="item of recommendList"
          :key="item.id"
          :to="'/detail/'+item.id"
      >

          <img class="item-img" :src="item.imgUrl" alt="">
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<style lang="stylus" scoped>
  //  为了解决3g下的网络加载问题，防止明显的拖动，因此轮播外面包裹一个明显的DIV
  //  并且DIV大小要和图片比例一致
  //   这是修改轮播点的样式，具体是看浏览器里面的CSS样式
  // 然后修改，，这是穿透写法
  @import "~styles/mixins.styl"

  /*  还是用弹性盒子布局好得很多，方便，又好使用   */
  .recommend-title
    margin-top :.2rem
    line-height :.8rem
    background :#f4f2f2
    /*  缩进 */
    text-indent :.2rem
  .item
    display :flex
    /*background :red*/
    overflow :hidden
    height:2.4rem
    .item-img
      width :2rem
      height :2rem
      padding :.2rem
    .item-info
      /* 这是剩余空间的的占据比率，flex的值全部加起来就好了  */
      flex :1
      padding:.2rem
      /* 这是出现...文本做的东西 给盒子设定一个宽度， */
      /* text-overflow: ellipsis 才会生效 */
      min-width:0
      .item-title
        margin-top: .26rem
        height: .44rem
        color: #212121
        font-size: .32rem
        line-height: .44rem
        /* 这是文本裁剪，多余文本隐藏。不换行  */
        ellipsis()
      .item-desc
        color: #616161;
        font-size: .22rem;
        line-height: .32rem;
        vertical-align: text-bottom
        ellipsis()
      .item-button
        flex :1
        margin-top: .26rem;
        // 上右下左
        padding: 0 .2rem
        font-size: .26rem;
        color: #fff
        background #ff9800
        line-height: .4rem
        border-radius :.1rem

</style>
<script>
export default {
  name: 'HomeRemcommend',
  data () {
    return {
      recommendList2: [
        {
          id: '0001',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1505/c2/c27514a93e8b8392.water.jpg_200x200_6adee98c.jpg',
          title: '东江湖',
          desc: '东江湖融山的隽秀、水的神韵于一体，挟南国秀色、禀历史文明于一身，被誉为“人间天上一湖水，万千景象在其中”，'
        },
        {
          id: '0002',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1804/ac/ac790af10ea8bc64a3.img.jpg_200x200_4f8703c0.jpg',
          title: '湖南九龙江国家森林公园',
          desc: '湖南省九龙江森林公园（以下简称九龙江公园）位于郴州市汝城县东南部，地处湘、粤、赣三省交界的旅游金三角地带，总面积8436.3公顷（含热水温泉景区510公顷），东西宽12.1公里，南北长11公里，分为九龙觅仙、九龙戏水、九龙奇岩、九龙飞瀑和热水温泉五大景区。公园管理局设三江口，距汝城县城30公里。公园北大门距离在建的厦蓉高速公路出口不足10公里，106国道和深湘高速公路穿境而过。周边旅游资源丰富，南临广东丹霞山，西毗莽山森林公园，北接资兴东江漂流、革命摇篮井冈山和中华始祖炎帝陵，地理条件得天独厚，区域优势十分明显。'
        },
        {
          id: '0004',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/201301/07/5b230b0483fae5cc93835fbb.png_200x200_8972faf5.png',
          title: '板梁古村',
          desc: '板梁古村位于湖南省郴州市永兴县高亭乡境内，现有人口1886人，耕地面积1260亩，一个自然村布局，辖19个村民小组，村民以种粮、种烤烟为业，生活传统古朴。'
        }, {
          id: '0005',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/201403/07/8c6f02bb85c3ac02d323ceb768a112a7.jpg_200x200_44fd0198.jpg',
          title: '汝城温泉福泉山庄',
          desc: '通过石板制热产生对人体有益的物质，直接作用于人体，缓解腰腿疼痛，关节痛。给你不同于泉水的感受。 “一热”、 “一冷”、 “一烤”，强身健体。体会冰火两重天，收获一份健康。'
        },
        {
          id: '0006',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/201401/20/95dfbe0be2079061eb079f824862c192.jpg_200x200_0acf5287.jpg',
          title: '万华岩',
          desc: '溶洞景观岩石无论大小，处处雄风大气，阳刚十足，赤壁倒悬，险峻无比，造型奇绝，特色鲜明。'
        },
        {
          id: '0007',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1505/f8/f8d2c784ab7dae78.water.jpg_200x200_8b0eaa14.jpg',
          title: '莽山森林温泉',
          desc: '首创东南亚超大豪华型空中SPA馆——诺亚方舟，让您拥有在悬崖上泡温泉的奇妙感受。错落分布的养生泉系列：百草泉、百花泉、香酒泉、香茶泉等六个泉池。以莽山当地中草药及百花为养生泡汤，以调节阴阳平衡，处于自然风光如画的绝佳位置，风光无限。'
        },
        {
          id: '0003',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/201301/14/986ce8718388386993835fbb.jpg_200x200_213a9152.jpg',
          title: '飞天山',
          desc: '位于郴州市苏仙区桥口镇境内，距郴州市城区约20公里，交通极为便捷。东江、郴江在这里交汇，千山万壑，云蒸霞蔚，翠竹葱茏，凉风习习，天低云淡，渔船点点，尤如梦中仙境，画里天堂！风景区由九寨，四垣、三庙、二江、一村站组成。红山绿水、秀峰险寨、奇石怪洞构成的自然景观和村宅街巷、石佛庙宇、陵墓悬棺等历史奇观，以及度假山庄、蒙古风情、水上乐园等人文景观，使之成为独具魅力的旅游胜地。被誉为“郴州明珠湘南桂林”。飞天山风景区属丹霞地貌，世界奇观”的黑垣。风景区内，奇峰异石，青山秀水，湖光山色，壮美迷人。沿江周围，石山林立，玉峰相接，连绵数十公里。更有千年悬棺，旷世之谜；临江佛雕，飞天壁画；天然卧佛，悠悠古迹；丹霞溶洞，神秘窝居；明清古墓，狮子吊陵；高山草原，圣母玉立……真是福地洞天，风观无限！风景区集自然、历史、人物奇观为一体，纳奇、险、秀、美于一身，令人流连忘返陶醉于山水之间，乐不思归！'
        }
      ],
    }
  },
  props:{
    recommendList:{
      type:Array
    }
  }
}
</script>
